<template>
    <div class="main-container">
        <div class="title">
            <h2>{{words.title}}</h2>
            <router-link to="/column-mng" class="pull-right">返回欄目管理>></router-link>
        </div>
        <el-form ref="form" label-width="80px">
            <el-form-item label="欄目名稱:">
                <el-input v-model="column.columnName"></el-input>
            </el-form-item>
            <el-form-item label="欄目類別">
                <el-select v-model="column.columnType">
                    <el-option label="列表" value="0"></el-option>
                    <el-option label="圖片（影片）" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="父欄目:">
                <select-tree ref="iSelectTree"
                    v-model="column.parentId"
                    :data="columnTreeData"
                    :props="{label: 'columnName', children: 'children', nodeKey: 'id'}">
                </select-tree>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveColumn">{{words.btn}}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import ueditor from '../components/ueditor.vue';
export default {
    components: {
        ueditor
    },
    mounted() {
        this.init();
    },
    data() {
        return {
            column: {
                id: '',
                columnName: '',
                parentId: '0',
                columnType: '0'
            },
            columnTreeData: [{
                id: '0',
                columnName: '頂級欄目'
            }],
            pageType: 'add'
        };
    },
    computed: {
        words() {
            return this.pageType === 'add' ? {
                title: '添加欄目',
                btn: '增加'
            } : {
                title: '編輯欄目',
                btn: '保存'
            }
        }
    },
    methods: {
        init() {
            /**
             * 这个页面处理三类内容
             * 1 编辑栏目，传入columnId
             * 2 新增子栏目，传入父栏目id,parentId
             * 3 新增栏目，没有任何参数
             */
            let columnId = +this.$route.query.columnId;
            let parentId = +this.$route.query.parentId;
            let columnName = this.$route.query.columnName;
            this.column.columnName = columnName ? columnName : '';
            // 编辑栏目
            if (columnId) {
                this.column.id = columnId;
                this.pageType = 'edit';
            }
            // 添加栏目
            this.getColumnTree().done(() => {
                if (parentId) {
                    this.column.parentId = parentId;
                }
            });
        },
        // getColumnById(columnId) {
        //     $.request('/column/getColumnById.do', {
        //         data: {id: columnId},
        //         method: 'get'
        //     }).then((res) => {
        //         $.extend(this.column, res.data);
        //     });
        // },
        getColumnTree() {
            return $.request('/column/getColumnTrees.do', {
                method: 'get'
            }).then(res => {
                res.data.every(item => {
                    return this.columnTreeData.push(item);
                });
            });
        },
        saveColumn() {
            let urls = {
                add: '/column/addColumn.do',
                edit: '/column/updateColumn.do'
            };
            $.request(urls[this.pageType], {
                data: this.column,
                method: 'get'
            }).then(res => {
                this.$confirm('操作成功！你可以选择继续添加或者返回列表', '提示', {
                    confirmButtonText: '返回列表',
                    cancelButtonText: '继续添加',
                    type: 'success'
                }).then(() => {
                    this.$router.push('column-mng')
                }).catch(() => {
                    this.resetColumn();
                });

            });
        },
        resetColumn() {
            this.column.columnName = '';
        }
    }
}
</script>
<style lang="less">
</style>
